<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="../../font/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/iconfont.ttf">
    <link rel="stylesheet" href="../../css/common.css"/>
    <link rel="stylesheet" href="../../css/myOrder/myorder.css">
    <link rel="stylesheet" href="../../css/model.css">


    <style>
        .details_order_head{
            padding-top: 20px;
            padding-left: 20px;
            padding-bottom: 20px;
            text-align: center;
            background-color: white;
        }

        .type {
            padding-bottom: 20px;
        }

        .order-status {
            margin-right: 20px;
            background-color: #FFEDDF;
            border: 1px solid #BA7E59;
        }

        .order-status .conter {
            margin-left: 20px;
            margin-top: 20px;

        }

        .bootstrap-table thead {
            background-color: #FFEDDF;
        }

        .model_content{
            width: 40%;
            height: auto;
        }
        .model_tip_title{
            float: none;
            text-align: center;
        }
        .btn-2{
            padding-top: 10px;
        }

    </style>
</head>
<body>

<!--评价框-->
<div class="model_box collection_confirm_box">
    <div class="model_content ">
        <div class="close_model_box icon-font icon-delete2circlecoloring" onclick="closeEvaluation()"></div>
        <div class="model_info">
            <div class="model_info_title">
                <div class="model_tip_icon "></div>
                <div class="model_tip_title">
                    <div class="title_zh">填写评价</div>
                    <div class="title_en">Fill in the comment</div>
                </div>
            </div>
            <div class="model_info_cont">
                <div class="row">
                    <div class="col-lg-3 col-sm-3 ">评价内容<br>comment</div>
                    <div class="col-lg-9 col-sm-9"><img src="../../image/myorder/star.png"></div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-sm-3">评价内容<br>comment</div>
                    <div class="col-lg-9 col-sm-9"><img src="../../image/myorder/star.png"></div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-sm-3">评价内容<br>comment</div>
                    <div class="col-lg-9 col-sm-9"><img src="../../image/myorder/star.png"></div>
                </div>
                <div class="row top">
                    <div class="col-lg-11 ">
                        <textarea class="form-control " rows="5"></textarea>
                    </div>

                </div>
            </div>
        </div>
        <div class="model_bottom_bar">
            <div class="model_btn collection_sure_btn">
                <div class="btn-2">确认(determine)</div>

            </div>
        </div>
    </div>
</div>
<div class="body">
<div class="tab-pane fade in active top" id="details_order">
    <div class="details_order_head ">
        <div class="row">
            <div class="col-lg-3 col-sm-3">2018/1/17<br>11:40</div>
            <div class="col-lg-3 col-sm-3">2018/1/17 <br>11:40</div>
            <div class="col-lg-3 col-sm-3">2018/1/17<br> 11:40</div>
            <div class="col-lg-3 col-sm-3">2018/1/17 <br>11:40</div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-sm-3">s</div>
            <div class="col-lg-3 col-sm-3">s</div>
            <div class="col-lg-3 col-sm-3">s</div>
            <div class="col-lg-3 col-sm-3">s</div>

        </div>
        <div class="row ">
            <div class="col-lg-3 col-sm-3">买家下单<br>Buyers order</div>
            <div class="col-lg-3 col-sm-3">商家发货<br>Business delivery</div>
            <div class="col-lg-3 col-sm-3">买交易完成<br>Transaction complete</div>
            <div class="col-lg-3 col-sm-3">待评价<br>Be evaluated</div>
        </div>
    </div>

    <div class="form  ">
        <div class="row type">
            <div class="border-bottom">
                <div class="">订单信息:<br>order information</div>
                <div class="top"></div>
            </div>

            <div class="order-status top">
                <div class="row conter">
                    <div class="col-lg-1 col-sm-2">订单状态：<br>Order Status</div>
                    <div class="col-lg-10 col-sm-9">完成</div>
                </div>
                <div class="row conter">
                    <div class="col-lg-1 col-sm-2">提示：<br>prompt</div>
                    <div class="col-lg-10 col-sm-9">交易已完成，若买家要求退换货，请与卖家电话协商<br>
                        The transaction has been completed, if the buyer requires return, please consult with
                        the buyer's phone
                    </div>
                </div>
                <div class="bottom"></div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-sm-6 top">
                    <div class="row">
                        <div class="col-lg-2 col-sm-5">订单编号 :<br>Order Number</div>
                        <div class="col-lg-10 col-sm-7">5689849879854564698</div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6  top">
                    <div class="row">
                        <div class="col-lg-2 col-sm-5">送货日期 :<br>Delivery date</div>
                        <div class="col-lg-10 col-sm-7">2017/11/11</div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-sm-6 top">
                    <div class="row">
                        <div class="col-lg-3 col-sm-5">收货地址：<br>Shipping address</div>
                        <div class="col-lg-9 col-sm-7">这里是收货地址<br> here is the shipping address</div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6  top">
                    <div class="row">
                        <div class="col-lg-2 col-sm-5">买家备注：<br>Buyer Notes</div>
                        <div class="col-lg-10 col-sm-7">备注</div>
                    </div>
                </div>

                </div>
            </div>
        </div>
    <div style="padding-bottom:100px ">
        <table class="table table-hover table-responsive" id="details_order_table"></table>
        <div class="bottom btn btn-default top btn-2" onclick="openEvaluation()">
            <div>评价(Evaluation)</div>
        </div>
    </div>

</div>
</div>




</body>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../js/common.js"></script>

<script>
    $(function () {
        getdetails_order();
    })
/*
 * @description : 获取订单详情
 * @params:
 * @author : peng huaneng
 * @date : 2018/1/18 10:32
 */
    function getdetails_order() {
        $('#details_order_table').bootstrapTableEx({
            // url : '../../sys/user/list?_' + $.now(),
            height: $(window).height() - 54,
            queryParams: function (params) {
                return params;
            },
            columns: [
                {
                field: 'name',
                title: '商品名称<br>commodity',
                formatter: function (value, row, index) {
                    var html = '';
                    html = '<div class="row">' +
                        '<div class="col-lg-6"><img src="' + row.url + '" style="max-width: 40px;max-height: 40px"></div>' +
                        '<div class="col-lg-6">' + row.name + '</div>' +
                        '</div>';
                    return html;
                }
            }, {
                field: 'price',
                title: '价格<br>price'
            }, {
                field: 'quantity',
                title: '数量<br>Quantity'
            }, {
                field: 'discount',
                title: '优惠<br>Discount'
            }, {
                field: 'status',
                title: '交易状态<br>trading status'
            }],
            data: [{
                "id": 1, "name": "牛肉", "price": 1.00, "quantity": 11, "discount": 12,
                "status": "待付款", "url": "../../image/myorder/food.png"
            }, {
                "id": 2, "name": "牛肉", "price": 1.00, "quantity": 11, "discount": 12,
                "status": "待付款", "url": "../../image/myorder/food.png"
            }, {
                "id": 2, "name": "牛肉", "price": 1.00, "quantity": 11, "discount": 12,
                "status": "待付款", "url": "../../image/myorder/food.png"
            }
            ]
        });
        $(".fixed-table-container").css("height", "auto").css("padding-bottom", "0px");
    }

    //打开评价框
    function openEvaluation() {

        $('.collection_confirm_box').fadeIn(300);
    }
    //关闭评价框
    function closeEvaluation() {
        $('.collection_confirm_box').fadeOut(300);
    }
</script>
</html>